import { Component, Host, h, State, Prop, VNode, ComponentInterface, forceUpdate } from '@stencil/core';
import { ITheme } from 'xterm';
import { XtermThemeCfg } from '../../configs';
import { GroupMessageService, TerminalMessageService } from '../../service';

@Component({
  tag: 'ibz-terminal-tab',
  styleUrl: 'ibz-terminal-tab.scss',
})
export class IBzTerminalTab implements ComponentInterface {
  @Prop()
  gms: GroupMessageService = GroupMessageService.getInstance();

  @Prop()
  theme: 'dark' | 'light' = 'dark';

  @State()
  active: string = '';

  @State()
  lock: string = '';

  componentWillLoad(): void {
    this.active = this.gms.activeGroup;
    this.lock = this.gms.lockGroup;
  }

  connectedCallback(): void {
    this.gms.evt.on('change', this.groupChange);
  }

  disconnectedCallback(): void {
    this.gms.evt.off('change', this.groupChange);
  }

  groupChange = (): void => {
    this.active = this.gms.activeGroup;
    this.lock = this.gms.lockGroup;
    forceUpdate(this);
  };

  activeTab(e: MouseEvent, name: string) {
    e.stopPropagation();
    this.gms.activeTab(name);
  }

  lockActiveTab(e: MouseEvent, name: string): void {
    e.stopPropagation();
    this.gms.lockTab(name);
    this.gms.activeTab(name);
  }

  removeTab(e: MouseEvent, name: string): void {
    e.stopPropagation();
    this.gms.destroy(name);
  }

  renderTabItem(key: string, item: TerminalMessageService) {
    return (
      <div
        key={key}
        class={{
          'ibz-terminal-tab-exp-item': true,
          'active-tab': this.active === key,
          'lock-tab': this.lock !== key && this.lock !== '',
        }}
        onClick={e => this.activeTab(e, key)}
      >
        <div class='label-container' title={key}>
          <span class='label-icon'></span>
          <span class='label-name'>
            {key}
            <span class='not-read-num'>{item.newMessages.length > 0 ? ` (${item.newMessages.length})` : ''}</span>
          </span>
        </div>
        <div class='exp-item-actions'>
          {key !== this.gms.defaultGroup && key !== this.lock ? (
            <div class='action-item' onClick={e => this.removeTab(e, key)}>
              {this.renderRemoveIcon()}
            </div>
          ) : null}
          <div class='action-item' onClick={e => this.lockActiveTab(e, key)}>
            {this.lock !== '' && this.lock === key ? this.renderLockIcon() : this.renderUnlockIcon()}
          </div>
        </div>
      </div>
    );
  }

  render() {
    const theme: ITheme = XtermThemeCfg[this.theme];
    const groups: VNode[] = [];
    const terminal = <ibz-terminal key={this.active} theme={this.theme} ms={this.gms.map.get(this.active)} />;
    this.gms.map.forEach((item, key) => {
      groups.push(this.renderTabItem(key, item));
    });
    let content: VNode | VNode[];
    if (groups.length === 1) {
      content = terminal;
    } else {
      content = (
        <ibz-split split={100} splitReverse={true} style={{ '--split-background-color': theme.cursor + '7a' }}>
          <div class='ibz-terminal-tab-content'>{terminal}</div>
          <div slot='content' class='ibz-term-tab-exp'>
            {groups}
          </div>
        </ibz-split>
      );
    }
    return (
      <Host
        class='ibz-terminal-tab'
        style={{ 'background-color': theme.background, color: theme.foreground, '--active-bk-color': theme.selectionBackground }}
      >
        {content}
      </Host>
    );
  }

  renderRemoveIcon(): VNode {
    return (
      <svg class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
        <path d='M803.08 169.78l-129.41 0 0-23c-0.038-12.985-10.555-23.502-23.54-23.54l-286.92 0c-12.985 0.038-23.502 10.555-23.54 23.54l0 23-118.75 0c-22.87 0-41.58 21.6-41.58 48s18.71 48 41.58 48l582.16 0c22.87 0 41.58-21.6 41.58-48s-18.66-48-41.58-48zM233.36 824.55c0.126 42.037 34.173 76.084 76.21 76.21l404.86 0c42.037-0.126 76.084-34.173 76.21-76.21l0-504.25-557.28 0 0 504.25zM585.67 418.19c0-22.87 21.6-41.58 48-41.58s48 18.71 48 41.58l0 377.42c0 22.87-21.6 41.58-48 41.58s-48-18.71-48-41.58l0-377.42zM342.34 418.19c0-22.87 21.6-41.58 48-41.58s48 18.71 48 41.58l0 377.42c0 22.87-21.6 41.58-48 41.58s-48-18.71-48-41.58l0-377.42z'></path>
      </svg>
    );
  }

  renderUnlockIcon(): VNode {
    return (
      <svg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
        <path d='M876.08888889 457.40284814H307.20404594V202.54062592a63.75601038 63.75601038 0 0 1 63.72364629-63.75600925h282.14461554a63.75601038 63.75601038 0 0 1 63.75601038 63.75600925v77.34866147c0 5.01633593 4.07779555 9.09413149 9.0617674 9.09413149h63.75601038a9.12649443 9.12649443 0 0 0 9.0617674-9.06176739V202.47589888a145.63555555 145.63555555 0 0 0-145.63555556-145.63555555h-282.14461554a145.63555555 145.63555555 0 0 0-145.63555556 145.63555555v254.89458631H147.91111111c-20.13006962 0-36.40888889 16.24645518-36.40888889 36.40888889v436.90666667c0 20.13006962 16.27881927 36.40888889 36.40888889 36.40888888h728.17777778c20.13006962 0 36.40888889-16.27881927 36.40888889-36.44125297v-436.90666667c0-20.13006962-16.27881927-36.40888889-36.40888889-36.40888889z m-332.24324779 269.65232185v60.29312a9.12649443 9.12649443 0 0 1-9.06176739 9.09413148h-45.53538333a9.12649443 9.12649443 0 0 1-9.09413148-9.09413148v-60.29312a54.59715186 54.59715186 0 1 1 63.6912822 0z'></path>
      </svg>
    );
  }

  renderLockIcon(): VNode {
    return (
      <svg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
        <path d='M876.08888889 457.38666667h-77.36888889V202.52444445c0-80.44088889-65.19466667-145.63555555-145.63555555-145.63555556H370.91555555c-80.44088889 0-145.63555555 65.19466667-145.63555555 145.63555556v254.86222222h-77.36888889c-20.13866667 0-36.40888889 16.27022222-36.40888889 36.40888888v436.90666667c0 20.13866667 16.27022222 36.40888889 36.40888889 36.40888889h728.17777778c20.13866667 0 36.40888889-16.27022222 36.40888889-36.40888889V493.79555555c0-20.13866667-16.27022222-36.40888889-36.40888889-36.40888888zM543.85777778 727.04v60.30222222c0 5.00622222-4.096 9.10222222-9.10222223 9.10222223h-45.5111111c-5.00622222 0-9.10222222-4.096-9.10222223-9.10222223v-60.30222222c-13.76711111-9.89866667-22.75555555-26.05511111-22.75555555-44.37333333 0-30.15111111 24.46222222-54.61333333 54.61333333-54.61333334s54.61333333 24.46222222 54.61333333 54.61333334c0 18.31822222-8.98844445 34.47466667-22.75555555 44.37333333z m172.94222222-269.65333333H307.2V202.52444445c0-35.15733333 28.55822222-63.71555555 63.71555555-63.71555556h282.1688889c35.15733333 0 63.71555555 28.55822222 63.71555555 63.71555556v254.86222222z'></path>
      </svg>
    );
  }
}
